<template>
    <div class="card-container" v-loading="loading">
        <swiper ref="swiperRef" :spaceBetween="30" :centeredSlides="false" :pagination="{
            clickable: true,
        }" :modules="modules" @swiper="onSwiper" class="mySwiper">
            <swiper-slide v-for="item in cardList" :key="item.deviceId">
                <div class="box-card">
                    <div class="card-main">
                        <div class="card-title" style="cursor: pointer;" @click="handleUpdate(item)">
                            <div class="img-view" >
                                <img class="icon" src="@/assets/images/card-small-icon.png" alt="">
                            </div>
                            <span class="content" >{{ item.deviceName }}</span>
                        </div>
                        <div class="card-body">
                            <div class="sub-item"> 
                                <div class="sub-title">
                                    设备介绍
                                </div>
                                <div class="sub-content jieshao">
                                    {{ item.deviceIntroduce }}
                                </div>
                            </div>
                            <div class="sub-item">
                                <div class="sub-title">
                                    设备特点
                                </div>
                                <div class="sub-content">
                                    {{ item.deviceSpecial }}
                                </div>
                            </div>
                            <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
                                <div class="sub-item">
                                    <div class="sub-title">
                                        厂商
                                    </div>
                                    <div class="sub-content">
                                        {{ item.factoryName }}
                                    </div>
                                </div>
                                <div class="sub-item">
                                    <div class="sub-title">
                                        出厂日期
                                    </div>
                                    <div class="sub-content">
                                        {{ item.productTime }}
                                    </div>
                                </div>
                                <div class="sub-item">
                                    <div class="sub-title">
                                        品牌
                                    </div>
                                    <div class="sub-content">
                                        {{ item.brand }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <!-- 添加或修改卡片管理对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="cardRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="设备介绍" prop="deviceIntroduce">
                    <el-input v-model="form.deviceIntroduce" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="设备特点" prop="deviceSpecial">
                    <el-input v-model="form.deviceSpecial" placeholder="请输入设备特点" />
                </el-form-item>
                <el-form-item label="厂商" prop="factoryId">
                    <el-select v-model="form.factoryId" class="m-2 full" placeholder="请选择厂商">
                        <el-option v-for="dict in factory" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出厂日期" prop="productTime">
                    <el-date-picker clearable v-model="form.productTime" type="date" value-format="YYYY-MM-DD"
                        placeholder="请选择出厂日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="品牌" prop="brand">
                    <el-select v-model="form.brand" class="m-2 full" placeholder="请选择品牌">
                        <el-option v-for="item in ppOptions" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';
import { listCard, getCard, delCard, addCard, updateCard } from "@/api/deviceBase/card";
import { useRoute } from 'vue-router';
import { nextTick } from 'vue';
const slider = ref(null)
const route = useRoute()
console.log(route)
const ppOptions = ['戴尔', '华为', '天昊', '爱维达', '海信']
const modules = ref([Pagination])
const { proxy } = getCurrentInstance();
const { factory } = proxy.useDict('factory');
const cardList = ref([]);
const open = ref(false);
const loading = ref(false);
const title = ref("");

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceName: null,
    },
    rules: {
    }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询卡片管理列表 */
async function getList() {
    loading.value = true;
    const response = await listCard(queryParams.value)
    loading.value = false;
    cardList.value = response.rows;
    
    
}
nextTick(()=>{
    console.log('wqewqewqe::',slider.value)
    if (slider.value) {
       
    }
})
// 取消按钮
function cancel() {
    open.value = false;
    reset();
}
const onSwiper = (event) => {
    slider.value = event;
    console.log(slider.value) || Number(route.query.index)
        slider.value.slideTo(Number(route.query.index) ?? 0);
}
// 表单重置
function reset() {
    form.value = {
        deviceId: null,
        deviceName: null,
        deviceIntroduce: null,
        deviceSpecial: null,
        factoryId: null,
        productTime: null,
        brand: null
    };
    proxy.resetForm("cardRef");
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const _deviceId = row.deviceId || ids.value
    getCard(_deviceId).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改卡片管理";
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["cardRef"].validate(valid => {
        if (valid) {
            updateCard(form.value).then(response => {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
            });
        }
    });
}
getList()
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>